
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {Util} from "../util";
import  List from './list';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

type Props = {};
export default class cayegory extends Component<Props> {
    constructor(props){
        super(props);
        const {navigation,data} = props;
        this.state = {
          data:data,
          navigation:navigation,
        };

    }
    render() {
        var data = this.state.data;
        var views1 = [];
        var views2 = [];

        for (var i in data){
            let item = (
                <View style={styles.row_item} key={i}>
                    <TouchableOpacity style={styles.item} onPress={this._goToList.bind(this,data[i].text)} >
                        <Text style={styles.title}>{data[i].text}</Text>
                    </TouchableOpacity>
                </View>
            );
            if (i < 2){
               views1.push(item);
            } else {
                views2.push(item);
            }
        }

        return (
            <View style={styles.container}>
                <Text style={styles.text1}>分类</Text>
                <View style={styles.row}>
                    {views1}
                </View>
                <View style={styles.row}>
                    {views2}
                </View>
            </View>
        );
    }
    _goToList(name) {
        let type = this._getType(name);
        let url = 'http://localhost:3000/data/read?type=' + type
        this.state.navigation.navigate('List',{title:name, url: url});
    }
    _getType(name){
        let type = 'it';
        switch (name) {
            case '互联网':
                type = 'it';
                break;
            case '金融':
                type = 'cookies';
                break;
            case '股票':
                type = 'manager';
                break;
            case '基金':
                type = 'sanwen';
                break;
            default:
                type = 'it';
        }
        return type;
    }
}

const styles = StyleSheet.create({
    container:{
        marginLeft: 10,
        marginRight: 10,
    },
    text1:{
        color: '#5E5E5E',
        marginBottom: 8,
        fontSize: 16,
    },
    row:{
      flexDirection: 'row',
        marginTop: 5,
    },
    item:{
        flex: 1,
        height: 81,
        width: (Util.size.width - 30)/2,
        borderColor: '#F1F1F1',
        borderWidth: 1,//Util.pixel,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
    },
    row_item:{
      flex: 1,
    },
    title:{
      color: '#707070',
      fontSize: 17,
        fontWeight: '400',
    },
});